@charset "UTF-8";
@import "_basis";

.content-main {
  > div {
    flex: 1;
    display: flex;
    flex-direction: column;

    > div {
      display: flex;
      flex-direction: column;
    }
  }

  .content-title {

    >p{
      width: 135px;
    }
    .change{
      margin-left:20px;
      width: 20px;
      cursor: pointer;
    }
  }
  .content-center {
    position: relative;
    .content-center-bg {
      position: relative;
      background: url("../images/index-center-top-left.png") no-repeat top right,url("../images/index-center-top-right.png") no-repeat top left;
      &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 26px;
        bottom: 16px;
        width: 100%;
        background-image: url("../images/index-center.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
        z-index: 1;
      }
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 16px;
        width: 100%;
        background:url("../images/index-center-bottom.png");
        background-size: 100% auto;
        z-index:11;
      }
      &.time-box:before{
        top: 50px;
        background-image: url("../images/index-center-bottom1-bg.png");
      }
    }
    .time-box {
      padding-top: 25px;
      //animate-delay: 3s;
      //-webkit-animation-delay:3s; /* Safari 和 Chrome */
      .flex1 {
        position: relative;
        z-index: 2;
      }
      .index-title {
        background-image: url("../images/index-center-bottom-bg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        color: $colorTurquoise;
        text-align: center;
        font-size: 18px;
        line-height: 27px;
      }
    }


    #index_3{
      margin-top:-20px;
    }
    .time-box {
      display: flex;
    }
  }
  .content-right {
    .content-right-bg {
      margin-bottom: 20px;
      background-image: url("../images/title-bg-1.png");
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 258px 57px;
    }
    .content-right-top {
      display: flex;
      flex-direction: column ;
      height: 100%;
      >div{
        display: flex;
        flex-direction: column;
        //&:nth-child(1){
        //  animate-delay: 4s;
        //  -webkit-animation-delay:4s; /* Safari 和 Chrome */
        //}
        //&:nth-child(2){
        //  animate-delay: 5s;
        //  -webkit-animation-delay:5s; /* Safari 和 Chrome */
        //}
        //&:nth-child(3){
        //   animate-delay: 6s;
        //   -webkit-animation-delay:6s; /* Safari 和 Chrome */
        // }
        //&:nth-child(4){
        //  animate-delay: 7s;
        //  -webkit-animation-delay:7s; /* Safari 和 Chrome */
        //}
      }
    }
    .sex-box {
      display: flex;
      flex-direction: column ;
      //animate-delay: 7s;
      //-webkit-animation-delay:7s; /* Safari 和 Chrome */
    }

  }
  .index-content-left{
    flex: none!important;
    width: 340px;
  }
  .content-left, .index-content-left {

    margin-right:24px;
    > div {

      &:last-child{
        margin-bottom:0
      }
      &.heroic-box {
        .content-left-main {
          padding: 10px;
        }
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
          li {
            display: flex;
            justify-content: center;
           width: 25%;
            &:nth-of-type(3n){
              margin-bottom: 20px;
            }

            .img-box {
              position: relative;
              max-width: 30px;
              min-width: 30px;
              //margin-right: 10px;
            }

            > .heroic-content {
              min-width: 43px;
              max-width: 43px;
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 12px;
              color: #fff;

              b {
                font-weight: 400;
                color: $colorTurquoise;
                font-size: 18px;
              }

              p{
                font-size: 12px;
                text-align: center;
              }
            }
          }
        }
      }

      &.voice-box {
        font-size: 14px;
        //animate-delay: 1s;
        //-webkit-animation-delay:1s; /* Safari 和 Chrome */
        .content-left-main {
          padding: 10px;
          div {
            color: $colorTurquoise;
            line-height: 32px;

            b {
              font-size: 18px;
            }
          }

          p {
            color: $colorGreen;
          }
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              font-size: 12px;
              color: #fff;
              &:first-child{
               i{
                 background-color: $colorRed;
               }
              }
              &:nth-child(2){
                i{
                  background-color: $colorYellow;
                }
              }
              &:nth-child(3){
                i{
                  background-color: $colorTurquoise;
                }
              }
              i{
                width: 15px;
                height: 15px;
                margin-right: 4px;
                border-radius: 50%;
                text-align: center;
              }
              span{
                //width: 60px;
                width: auto;
              }
              b{
                flex: 1;
                position: relative;
                margin-right: 4px;
                &:before{
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 0;
                  width: 100%;
                  border-top:1px dotted rgba(255,89,89,.6);
                }
              }
              strong {
                color: $colorRed;
                width: 50px;
              }
            }
          }
        }
      }
      &.traffic-box {
        display: flex;
        flex-direction: column;
        //animate-delay: 2s;
        //-webkit-animation-delay:2s; /* Safari 和 Chrome */
        .content-left-main {
          display: flex;
          flex-direction: column;
          ul{
            display: flex;
            justify-content:space-around;
            align-items: center;
            text-align: center;
            color: #fff;
            li{
              flex: 1;
              p{
                margin: 16px 0 6px;
              }
              span {
                height: 26px;
                display: block;
              }
              i{
                position: relative;
                width:22px;
                height: 24px;
                margin: 0 2px;
                font-size: 16px;
                line-height: 24px;
                font-family: 'DIN';
                color: #fff;
                background:rgba(0,228,255,0.16);
                &:before{
                  position: absolute;
                  content: '';
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  border:1px solid rgba(0,228,255,1);
                  margin-top: -1px;
                }
                &:after{
                  position: absolute;
                  content: '';
                  left: 0;
                  bottom: 0;
                  width: 100%;
                  height: 1px;
                 background:  rgba(0,228,255,1);
                }
                //border:1px solid rgba(0,228,255,1);
              }
            }
          }
        }
      }
    }

  }

    .content-left{
      .map-box{
        position: relative;
        width: 100%;
        height:100%;
        margin-bottom: 24px;
        .index-map{
          width: 100%;
          height: 100%;
        }
        .map-info{
          position: absolute;
          right:0;
          top:0;
          width: 250px;
          height: 341px;
          background-color:rgba(0, 0, 0, .4);
          border:1px solid rgba(60, 155, 174, .4);
          font-size: 14px;
          z-index: 1000;
          h2 {
            position: relative;
            padding:10px 15px ;
            font-size: 22px;
            &:after{
              bottom: 0;
              left: 15px;
              content: '';
              position: absolute;
              width: 42px;
              height: 3px;
              background-color:  #3C9BAE;

            }
          }
          >div{
            display: flex;
            justify-content: space-between;
            padding:16px 10px 0 20px;
            color: #00EDFE;
            span {

              color: #FF775D;
            }
          }
        }
      }
    }
  .content-left-main {
    position: relative;
    flex: 1;
    background: url("../images/content-bottom-1.png") bottom left no-repeat;
    background-size: 100% 13px;
    z-index: 2;

    //&:before {
    //  content: "";
    //  position: absolute;
    //  top: -11px;
    //  left: 0;
    //  z-index: -1;
    //  width: 100%;
    //  height: 17px;
    //  background: url("../images/content-top-1.png") top left no-repeat;
    //  background-size: 100% 100%;
    //}
    //
    //&:after {
    //  content: "";
    //  position: absolute;
    //  top: 6px;
    //  bottom: 13px;
    //  left: 0;
    //  z-index: -1;
    //  width: 100%;
    //  background-image: url("../images/content-center-1.png");
    //  background-repeat: repeat;
    //  background-size: 100% auto;
    //}
  }
}

.search-all-list{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.search-all{
  display: block;
  width: 15px;
  margin-right:15px;
  >img{
    display: block;
    width: 100%;
  }
}
.shanxi-prop{
  position: absolute;
  bottom:10px;
  right: 10px;
  width: 300px;
  height:500px;
  background-color: #04121d;
  border: 1px solid #2EA6FF;
  z-index: -10;
  transform: scale(0);
  transition: all .5s;
  >a{
    position: absolute;
    width: 15px;
    right: 10px;
    top: 10px;
    z-index: 9999;
  }
  &.active{
    z-index: 23;
    transform: scale(1);
  }

}
